﻿<!DOCTYPE html>
<html>
<head>
    <title>表单中心</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
    <!-- 引入jQuery 和 jquery-ui -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/style.css?v=1111131093312441111">

    <script src="./js/drag.js?v=111111"></script> 
    <script src="./js/layout.js?v=1111821111111"></script>

    <style>
        .gbtns {
            width: 100%;
            height:30px;
            background-color: #ccc;
            line-height:30px;
            
        }
        
        .gbtns div {
            float: right;
            margin-right: 10px;
            color: white;
            /* display: none; */
            cursor: pointer
        }
        </style>
</head> 

<body>
     
    <div id="gbtns" class="gbtns">
        <div id="addgroup">增加分组</div>
        <div id="addblock">增加方块</div> 
        <div id="edit">编辑模式</div>
        <div id="look">浏览模式</div>
        <div id="export">导出数据</div>
    </div>

    <br/>

    <div id="container"></div>


 
    <script>
        
        //开始布局 传入treeData数据即可
        var obj = jQuery("#container").layout({

            url: "/drag_demo/data.json?v=efdfd2fdf32fdf32ff",
            //重写分组的删除接口 （自定义一些动作）
            groupIconClick:function(el){
                console.log(el)
            },
            //重写方块的删除接口 （自定义动作）
            blockIconClick:function(el){
                console.log(el)
            },
            // //重写加号动作 自定义添加子项
            // plusClick:function(el){
            //     console.log(el)
            // },
            //重写分组移动事件动作接口 （自定义动作）
            sortAction:function(e, opt){
                console.log("更新分组顺序");
            },
            //预览时重写双击图标事件
            iconDblClick:function(el){
                console.log(el)
            }
            
        });


        //进入编辑模式
        jQuery("#edit").on("click",function(){
            obj.gotoEdit();
        });
        //进入预览模式
        jQuery("#look").on("click",function(){
            obj.editToLook();  
        }); 

        //调接口导出插件的数据
        jQuery("#export").on("click",function(){
            var res = obj.exportData(); 
            console.log(res);
        });   
        jQuery("#addgroup").on("click",function(){
            obj.createGroup();  
        });
        jQuery("#addblock").on("click",function(){
            obj.createBlock();  
        });
        

    </script>
     


    
</body>
</html>